<template>
  <div  class="style">
    <!-- 导航 -->
    <van-nav-bar
      title="一对一辅导"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 下拉弹框 -->
    <van-dropdown-menu :close-on-click-overlay="false">
      <van-dropdown-item title="选择上课时间">
        <div>
          <van-calendar
            :safe-area-inset-bottom="false"
            :show-title="false"
            :close-on-click-overlay="false"
            :title="''"
            :poppable="false"
            :show-confirm="false"
            :style="{ height: '600px' }"
          ></van-calendar>
        </div>
        <div>bduwabda</div>

        <!-- 底部按钮 -->
        <div class="bottom">
          <van-button>重置</van-button>
          <van-button type="danger">确定</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="选择老师条件" ref="item">
        <!-- centent -->
        <div class="all">
          <p class="title">老师类型</p>
          <div class="select">
            <button
              v-for="(item,index) in button"
              :key="index"
              @click="type(index)"
              :class="{'action':index==indexVal}"
            >{{item.title}}</button>
            text
          </div>
          <p class="title">只看</p>
          <div class="sls">
            <van-checkbox icon-size="15px" v-model="checked" shape="square">已关注</van-checkbox>
            <van-checkbox icon-size="15px" v-model="checked1" shape="square">上过课的</van-checkbox>
          </div>
          <p class="title">性别</p>
          <div class="select">
            <button
              v-for="(item,index) in button2"
              :key="index"
              @click="type2(index)"
              :class="{'action':index==indexVal2}"
            >{{item.title}}</button>
          </div>
          <p class="title">年级</p>

          <div class="select">
            <button
              v-for="(item,index) in button3"
              :key="index"
              @click="type3(index)"
              :class="{'action':index==indexVal3}"
            >{{item.title}}</button>
          </div>
          <p class="title">学科</p>

          <div class="select">
            <button
              v-for="(item,index) in button4"
              :key="index"
              @click="type4(index)"
              :class="{'action':index==indexVal4}"
            >{{item.title}}</button>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="bottom">
          <van-button>重置</van-button>
          <van-button type="danger">确定</van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="goods_style">
      <div id="goods" v-for="(item,index) in mylist" :key="index">
        <div class="img_style">
          <img :src="item.avatar">
        </div>
        <div class="goods_conter">
          <p>{{item.real_name}}</p>
          <span>{{item.sex==1?'男':'女'}}</span>
          <span>{{item.teach_age}}年教龄</span>
        </div>
        <div class="goods_btn">
          <button @click="goRar(item.teacher_id)">预约</button>
        </div>
      </div>

     

    </div>
  </div>
</template>

<script>
import {my_list} from '../../../utils/http.js'
export default {
  data() {
    return {
      date: "",
      show: true,
      button:'',
      checked:'',
      button2:'',
      checked1:'',
      button3:'',
      button4:'',
      mylist:[]
    };
  },
  mounted(){
    this.getList()
  },
  methods: {
    async getList(){
      await my_list().then((res)=>{
        console.log(res);
  this.mylist=res
      })
    },

    // 改变日期框展示状态
    onClickLeft() {
      this.$router.push(
        {
        path:"./Rcords"});
    },
    onClickRight() {},
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
        // 进入详情页
    goRar(id){
      console.log(id)
      this.$router.push({
        path:'/Rarticulars',
        query:{
          id:id
          }})
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  button {
    width: 50%;
  }
}
#goods {
  width: 100%;
  height: 2.4rem;
  font-size: 14px;
  display: flex;
  align-items: center;
  position: relative;
  background: white;
  border-radius: 11px;
  margin-top: 13px
}
span {
  margin-left: 17px;
  color: gray;
}
.img_style {
  margin-top: 5px;
  margin-left: 7px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  img{
     width: 55px;
  height: 55px;
    border-radius:50%
  }
}
.style{
  width: 100%;
  height:16.2667rem;
}
.goods_style{
  width: 100%;
  height: auto;
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 1px 13px 13px 13px;
}
.goods_btn {
  position: absolute;
  right: 13px;
}
</style>